<template>
  <div class="content">
    <div class="tips" v-if="tipFlag">
      <Icon type="ios-alert" size='24' color='#2d8cf0' />
      本页面仅显示线索推送记录，如需对线索客户进行管理，<span @click="goClueCustomer"
        class="goClueCustomer">请进入“线索客户”页面</span><span>
        <Icon type="md-close" size='24' color='#2d8cf0' class="closeClass"
          @click="tipsClose" /></span></div>
    <Tabs :value="sourceType" type="card" @on-click='tabClick'>
      <TabPane label="全部客户" name="0"></TabPane>
      <TabPane label="手动录入" name="1"></TabPane>
      <TabPane label="案场营销" name="2"></TabPane>
    </Tabs>
    <div class="topRecord">
      <div class="record1">
        <p v-for="(item,index) in topRocerd" :key="index"
          :class="{'curr':topRocerdActive==index}" @click="topRocerdClick(item,index)">
          <span>{{topRocerdData[item.key]}}</span><em>{{item.numText}}</em>
        </p>
      </div>
    </div>
    <div class="handles">
      <div>
        <Button type="primary" @click="exportData('0')"
          v-if="unlocking('0101030100')">导出Excel</Button>
        <Button type="primary" v-if="unlocking('0101030200')"
          @click="exportData('1')">导出</Button>
        <Button type="primary" @click="adjustHeader">调整表头排序</Button>
        <Button type="primary" class="operation" @click="operationClick"
          v-if="unlocking('0101030300')">查看导出记录</Button>
        <Button type="primary"> <a
          href="https://images.tospurfang.com/doc/%E7%BA%BF%E7%B4%A2%E8%AE%B0%E5%BD%95%E6%93%8D%E4%BD%9C%E6%8C%87%E5%BC%95.pdf"
          style="color:#fff;" target="_blank">查看操作指引</a>
        </Button>
      </div>
    </div>
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata"></dynamic-header>

    <dt-grid ref="table" :columns="columns" :page='page' :onFetch='onFetch'
      :cell-height="80" />



    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
    <operation-record ref="operationRecord"></operation-record>
  </div>
</template>

<script>
  import detailPage from '../details.vue'
  import columnOpt from './opt/column.js'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  import businessCommonMgr from '@/biz/businessReport/businessCommon'
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import publicCustomerMgr from '@/biz/customer/publicCustomer.js'

  import dt from '@dt/dt'
  export default {
    components: {
      detailPage,
      dynamicHeader
    },
    data() {
      return {
        // 3.0
        tipFlag: false,
        sourceType: '0',
        sourcedata: [],
        targetdata: [],
        assignConfirmFlag: false,
        retain: '', //是否保留
        topRocerd: [
          { key: 'clueSum', ids: '', numText: '全部线索' },
          { key: 'pushSuccessSum', ids: 'pushSuccessParam', numText: '推送成功' },
          { key: 'pushErrorSum', ids: 'pushErrorParam', numText: '推送失败' },
          { key: 'effectiveSum', ids: 'effectiveParam', numText: '有效线索' },
          { key: 'failureSum', ids: 'failureParam', numText: '失效线索' },
          { key: 'invalidSum', ids: 'invalidParam', numText: '无效线索' },
          { key: 'visitSum', ids: 'visitParam', numText: '转到访线索' }
        ],
        topRocerdData: {},
        chooseTopRocerd: '',
        topRocerdActive: null,
        page: {
          total: 0,
          current: 1
        },
        columns: [],
        params: {},
        detailsFlag: false,
        detailsParams: {},
      }
    },
    mounted() {
      this.isTips()
      columnOpt.sendThis(this)
      this.getColumns()
      clueCustomerMgr.getConsultant()
      clueCustomerMgr.getFilterOptions()
      clueCustomerMgr.getChannel()
      clueCustomerMgr.getArea()


    },
    methods: {
      operationClick() {
        this.$refs.operationRecord.show('export_clueRecord', 'M_6', this.$dt
          .buildInfo().housesId)
      },
      // 查看详情
      getDetail(row) {
        // 判断线索客户 还是案场客户
        this.detailsFlag = true
        this.detailsParams = {
          flag: 'clue',
          customerId: row.customerId,
          userCustomerId: row.userCustomerId,
          userId: row.userId,
          buildingId: this.$dt.buildInfo().housesId,
          cityCode: this.$dt.buildInfo().cityId,
        }
        // if (row.hereto == '1') {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     flag: 'clue',
        //     customerId: row.customerId,
        //     userCustomerId: row.userCustomerId,
        //     userId: row.userId,
        //     buildingId: this.$dt.buildInfo().housesId,
        //     cityCode: this.$dt.buildInfo().cityId,
        //   }
        // } else {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     flag: 'clue',
        //     customerId: row.customerId,
        //     userCustomerId: row.userCustomerId,
        //     userId: row.userId,
        //     buildingId: this.$dt.buildInfo().housesId,
        //     cityCode: this.$dt.buildInfo().cityId,
        //   }
        // }
      },
      tabClick(val) {
        console.log(val, this.sourceType, 'tab')
        this.sourceType = val
        this.$refs.table.fetch(true)
      },
      // 获取表头
      getColumns() {
        businessCommonMgr
          .reportHeadList({
            headType: 5
          })
          .then((res) => {
            this.sourcedata = res.hideHead
            this.targetdata = res.showHead
            this.targetdata.forEach((item, index) => {
              item.disabled = item.fixed
            })
            this.columns = []
            let baseColumns = columnOpt.columns
            this.targetdata.forEach(item => {
              let column = baseColumns.filter(baseItem => item.fieldKey == baseItem
                .field.split('_')[baseItem
                  .field.split('_').length - 1]
              )
              if (column.length) {
                column[0].field = item.fieldKey
                this.columns.push(column[0])
              } 
            })
            this.columns.push(baseColumns[baseColumns.length - 1])

            setTimeout(() => {
              this.$refs.table.fetch()

            }, 1000)
          })
          .catch((err) => {

          })
      },

      // 获取统计数据
      getCount(data) {
        let params = {
          ...data,
          buildingId: dt.buildInfo().housesId
        }
        return clueCustomerMgr.culeCount(params).then(res => {
          this.topRocerdData = res;
          return res
        })
      },
      // 列表数据
      onFetch(data, flag) {
        this.params = data
        this.params.sourceType = this.sourceType == '0' ? null : this.sourceType
        return this.getCount(this.params).then(() => {
          this.params.customerClueRecordIds = this.topRocerdData[this.chooseTopRocerd]
          this.params.buildingId = dt.buildInfo().housesId
          return clueCustomerMgr.culeRecordList(this.params).then(res => {
            this.page.total = res.total
            res.list = res.records
            return res
          })
        })
      },
      goClueCustomer() {
        this.$router.push({
          path: '/allCustomersManagement/clueCustomer',
        })
      },


      // tipsClose() {
      //   this.tipFlag = false
      // },


      tipsClose() {
        let params = {
          typeCode: 'CUSTOMER_CLUE_RECORD'
        }
        publicCustomerMgr.tipsClose(params).then(res => {
          this.isTips()
        })
      },
      isTips() {
        let params = {
          typeCode: 'CUSTOMER_CLUE_RECORD'
        }
        publicCustomerMgr.tipsGet(params).then(res => {
          if (res.tipsStatus == 1) {
            this.tipFlag = true
          } else {
            this.tipFlag = false
          }
        })

      },


      topRocerdClick(data, index) {
        this.chooseTopRocerd = data.ids
        if (this.topRocerdActive == index) {
          this.topRocerdActive = null
        } else {
          this.topRocerdActive = index
        }
        this.$refs.table.fetch(true)

      },
      adjustHeader() {
        this.$refs.dynamicHeader.show()
      },
      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },
      headUpdate(params) {
        console.log(params, '更新表头');
        businessCommonMgr
          .reportHeadUpdate({
            headType: 5,
            updateHead: params.updateInfo
          })
          .then((res) => {
            this.getColumns()
            this.$refs.dynamicHeader.hide()
          })
          .catch((err) => {

          })
      },

      exportData(mask) {
        let params = {
          ...this.params,
          maskCustomerPhone: mask
        }
        clueCustomerMgr.clueRecordExport(params)
      },
      markCancel() {
        this.detailsFlag = false
      },

    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;
        cursor: pointer;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p:nth-child(3n) {
          border-right: 1px #ccc solid;
        }

        p.curr {
          span {
            color: #2d8cf0;
            font-weight: bold;
          }
        }
      }



      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }

    .tips {
      background: rgba(254, 252, 236, 1);
      display: inline-block;
      padding: 5px;
      margin-bottom: 20px;

      span {
        color: #2d8cf0;
        margin-right: 20px;
      }

    }

    .closeClass {
      vertical-align: -5px;
      cursor: pointer;
    }

    .goClueCustomer {
      cursor: pointer;
    }
  }

  .handles {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;

    >div {
      >* {
        margin-left: 10px;
      }
    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>